<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			tr{
				text-align: center;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			#a{
				width: 50px;
				height: 40px;
				margin-left: 550px;
				margin-bottom: 10px;
			}
			#a button{
				width: 50px;
				height: 28px;
				margin-bottom: 10px;
			}
			#btn{
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<a href="8-06练习二.html" id="a">
			<button type="button" >添加</button>
		</a>						
		<table border="1" cellspacing="" cellpadding="" style="width: 600px;">
			<tr>
				<th>&nbsp;&nbsp;&nbsp;&nbsp;</th>
				<th>书籍名称</th>
				<th>出版日期</th>
				<th>价格</th>
				<th>购买数量</th>
				<th>操作</th>
			</tr>
			<tr id="first">
				<td><p>1</p></td>
				<td><a href="8-06练习二.html">《西游记》</a></td>
				<td><p>1889-10</p></td>
				<td><p name="price">￥320.22</p></td>
				<td>
					<button onclick="reduce(0)">-</button>
					<input type="text" id="num" name="amount" value="1" style="width: 20px;text-align: center;"/>
					<button onclick="pluscount(0)">+</button>
				</td>
				<td>
					<button type="button" id="btn">编辑</button>
					<button type="button" onclick="del()">删除</button>
				</td>
			</tr>
			<tr id="first">
				<td><p>1</p></td>
				<td><a href="8-06练习二.html">《红楼梦》</a></td>
				<td><p>1839-07</p></td>
				<td><p name="price">￥892.99</p></td>
				<td>
					<button onclick="reduce(1)">-</button>
					<input type="text" id="num" name="amount" value="1" style="width: 20px;text-align: center;"/>
					<button onclick="pluscount(1)">+</button>
				</td>
				<td>
					<button type="button" id="btn">编辑</button>
					<button type="button" onclick="del()">删除</button>
				</td>
			</tr>
			<tr id="first">
				<td><p>1</p></td>
				<td><a href="8-06练习二.html">《水浒传》</a></td>
				<td><p>1906-04</p></td>
				<td><p name="price">￥3980.00</p></td>
				<td>
					<button onclick="reduce(2)">-</button>
					<input type="text" id="num" name="amount" value="1" style="width: 20px;text-align: center;"/>
					<button onclick="pluscount(2)">+</button>
				</td>
				<td>
					<button type="button" id="btn">编辑</button>
					<button type="button" onclick="del()">删除</button>
				</td>
			</tr>
			<tr id="first">
				<td><p>1</p></td>
				<td><a href="8-06练习二.html">《三国演义》</a></td>
				<td><p>1919-01</p></td>
				<td><p name="price">￥720.22</p></td>
				<td>
					<button onclick="reduce(3)">-</button>
					<input type="text" id="num" name="amount" value="1" style="width: 20px;text-align: center;"/>
					<button onclick="pluscount(3)">+</button>
				</td>
				<td>
					<button type="button" id="btn">编辑</button>
					<button type="button" onclick="del()">删除</button>
				</td>
			</tr>
		</table>
		<p>
			总价格： <span id="totalPrice">
				
			</span>
		</p>
		<script type="text/javascript">
			/* 清除表格内容 */
			function clear(){
				let trs = tbody.children;
				for(let index in trs){
					tbody.remove(trs[index]);
				}
				tbody = document.createElement("tbody");
				table.appendChild(tbody);
			}
			//删除
			function del(){
				if (confirm("确认要删除吗？")) {
						var del=document.getElementById("first");
						del.parentNode.removeChild(del);
						alert("删除成功！！");
					}
			
			}
			
			
			//删除
			// function del(index){
			// 	console.log(index);
			// 	arr.splice(index,1);
			// 	clear();
			// 	update();
			// }
			// //增加
			// function pluscount(){
			// 	//得到input输入框
			// 	var i = document.getElementById("num");
			// 	//将value的字符串类型转换为数字类型
			// 	var value = parseInt(i.getAttribute("value"));
			// 	//规定最大值为10
			// 	if (value <= 10 ){
			// 		i.setAttribute("value",++value);
			// 	}
			// }
			// //减少
			// function reduce(){
			// 	var i = document.getElementById("num");
			// 	var value = parseInt(i.getAttribute("value"));
			// 	//最小值为0
			// 	if (value > 0 ){
			// 		i.setAttribute("value",--value);
			// 	}
			// }
			
			//减法
			function reduce(index) {
				//获取当前数量的值
				var amounts=document.getElementsByName("amount");
		 
				//得到第一个amount的元素的value属性的值
				var count=parseInt(amounts[index].value); //数量加1
		 
				if (count<=1){
					alert("不能再减了，快没了！！");
				} else {
					//得到第一个amount的元素的value属性的值
					var count=parseInt(amounts[index].value)-1; //数量加1
					//重新把count的值绑定在数量文本框里
					amounts[index].value=count;

				}
				total();
			}
		 
			//加法
			function pluscount(index) {
				//获取当前数量的值
				var amounts=document.getElementsByName("amount");
					 
				//得到第一个amount的元素的value属性的值
				var count=parseInt(amounts[index].value); //数量加1
					 
				if (count>9){
					alert("不能再加了，存库极限了！！");
				} else {
					//得到第一个amount的元素的value属性的值
					var count=parseInt(amounts[index].value)+1; //数量加1
					//重新把count的值绑定在数量文本框里
					amounts[index].value=count;
				}
				total();
			}
			
			function total() {
				//得到所有的数量
				var counts=document.getElementsByName("amount");
				//得到所有的单价
				var prices=document.getElementsByName("price");
				var sumMoney=0;
				for (var i=0;i<counts.length;i++){
					//乘以Math.pow(10,2)的原因为避免失真
					sumMoney+=(parseFloat(prices[i].value)*Math.pow(10,2)*parseInt(counts[i].value)/Math.pow(10,2));
				}
				//把总金额显示再指定的元素中
				document.getElementById("totalPrice").innerHTML="¥ "+sumMoney;
			}

		</script>
	</body>
</html>
